<template>
	<view class="mainbgc" @click="hidefalse">
		<u-modal :show="fkshow" title="请输入付款金额" :round="10" @confirm="fkshow=false">
			<view class="slot-content">
				<input type="number" class="shurudh margin_top" placeholder="请输入付款金额" v-model="dataAll.pay_price">
			</view>
		</u-modal>
		<!-- 加载进价 -->
		<header-top :messageInfo="{typeFlag:true,message:'采购单',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<!-- <view class="nostrongtext margin_right" @click="submit">提交</view> -->
					<view class="diandiandian" @click.stop="dian">
						<view class="selectcontent" v-show="selectshow">
							<view class="topbox">
								<view class="flexleft itemselect" @click.stop="fkshow=true">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/qiankuan.png" mode=""></image>
									</view>
									<view>付款</view>
								</view>
							</view>
							<view class="topbox">
								<view class="flexleft itemselect" @click.stop="qingkong">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/shanchu.png" mode=""></image>
									</view>
									<view>清空单据</view>
								</view>
							</view>
							<view class="sanjiao"></view>
						</view>
					</view>
				</view>
			</view>
		</header-top>
		<!-- 选择供应商选择仓库 -->
		<view class="" style="padding-bottom: 150rpx;">
			<view class="margin_top ffffff mainpadding ">
				<view class="flexleft">
					<view :class="dataAll.supplier_name?'lansebtn allbtn margin_right':'allbtn huisebtn margin_right'"
						@click="selectRole('/pages/workbench/jiben/gongyingsda?type=1')">
						{{dataAll.supplier_name || '选择供货商'}}
					</view>
					<view :class="dataAll.warehouse_name?'lansebtn allbtn':'allbtn huisebtn'"
						@click="selectRole('/pages/workbench/jiben/cangkuda?type=1')">
						{{dataAll.warehouse_name || '选择仓库'}}
					</view>
				</view>
				<view class="flexbetween margin_top" v-show="dataAll.supplier_name">
					<view class="flexleft xiaohui">
						<view class="margin_right">余额：
							<text class="xiaolv">{{dataAll.yfk_money}}</text>
						</view>
						<view>总欠款：
							<text style="color: #ff0000;">{{dataAll.qk_money}}</text>
						</view>
					</view>
					<view class="nostrongtext">{{dataAll.purchase_time}}</view>
				</view>
			</view>
			<!--商品名称-->
			<view class="ffffff margin_top" v-if="dataAll.data.length">
				<view class="flexbetween mainpadding">
					<view class="bigtext flex1s flexleft">商品名称</view>
					<view class="bigtext flex1s flexcenter">规格</view>
					<view class="bigtext flex1s flexcenter">单价</view>
					<view class="bigtext flex1 flexcenter">数量</view>
					<view class="bigtext flex1 flexright">小计</view>
				</view>
				<view class=" mainpadding2" v-for="(item,index) in dataAll.data" :key="index" @click="xgdjmx(item,index)">
					<view class="shangpin flexbetween">
						<view class="shangtext flex1s">{{item.goodsinfo.name}}</view>
						<view class="shangtext flex1s flexcenter">{{item.goods_sku_name}}</view>
						<view class="shangtext flex1s flexcolumn">
							<!-- <view>{{item.goods_sku_name}}</view> -->
							<view class="xiaolan">￥{{item.price}}</view>
						</view>
						<view class="shangtext flex1 flexcenter">*{{item.num}}</view>
						<view class="lansetextwbk flex1 flexright">￥{{item.num*item.price}}</view>
					</view>
				</view>
				<view class="flexbetween mainpadding">
					<view class="bigtext flex1s flexleft">合计：</view>
					<view class="bigtext flex1s flexcenter">{{hejiAll.goods_zl_num}}种({{hejiAll.goods_num}}件)</view>
					<view class="bigtext flex1 flexright">{{hejiAll.total_goods_price}}元</view>
				</view>
			</view>
			<!-- 计数量 -->
			<view class="mainpadding_top ffffff flexbetween">
				<view class="strongtext">配送方式（送货）</view>
				<!-- <u-radio-group style="flex: 0;" v-model="dataAll.ps_type" placement="row" circle>
					<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="自提" name="1"></u-radio>
					<u-radio activeColor="#0BBDCB" label="配送" name="2"></u-radio>
				</u-radio-group> -->
				<view class="flexright">
					<view class="flexright margin_right" @click="dataAll.ps_type=1">
						<u-icon name="checkmark-circle-fill" :color="dataAll.ps_type==1?'#0BBDCB':'#999'" size="20"></u-icon>
						<view class="strongtext">自提</view>
					</view>
					<view class="flexright" @click="dataAll.ps_type=2">
						<u-icon name="checkmark-circle-fill" :color="dataAll.ps_type==2?'#0BBDCB':'#999'" size="20"></u-icon>
						<view class="strongtext">配送</view>
					</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff flexbetween">
				<view class="strongtext">是否开具发票</view>
				<!-- <u-radio-group v-model="dataAll.kjfp_type" placement="row" circle>
					<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="是" name="1"></u-radio>
					<u-radio activeColor="#0BBDCB" label="否" name="2"></u-radio>
				</u-radio-group> -->
				<view class="flexright">
					<view class="flexright margin_right" @click="dataAll.kjfp_type=1">
						<u-icon name="checkmark-circle-fill" :color="dataAll.kjfp_type==1?'#0BBDCB':'#999'" size="20"></u-icon>
						<view class="strongtext">是</view>
					</view>
					<view class="flexright" @click="dataAll.kjfp_type=2">
						<u-icon name="checkmark-circle-fill" :color="dataAll.kjfp_type==2?'#0BBDCB':'#999'" size="20"></u-icon>
						<view class="strongtext">否</view>
					</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff flexbetween" v-if="dataAll.data.length">
				<view class="strongtext" style="min-width: 320rpx;">优惠</view>
				<input type="number" style="text-align: center;" placeholder="请输入" v-model="dataAll.discount_price">
			</view>
			<view class="mainpadding_top ffffff flexbetween" v-show="dataAll.ps_type==2 && dataAll.data.length">
				<view class="strongtext" style="min-width: 320rpx;">运费</view>
				<input type="number" style="text-align: center;" placeholder="请输入" v-model="dataAll.yf_price">
			</view>
			<view class="mainpadding_top ffffff flexbetween" v-if="dataAll.supplier_id && dataAll.data.length">
				<view class="strongtext" style="min-width: 320rpx;">使用余额</view>
				<input type="number" style="text-align: center;" placeholder="请输入" v-model="dataAll.use_yfk_price">
			</view>
			<view class="ffffff mainpadding_top">
				<view class="titletext">备注</view>
				<textarea class="textarea mainpadding radius margin_top" placeholder="请输入采购单备注信息"
					v-model="dataAll.notes"></textarea>
			</view>
			<view class="mainpadding" v-if="dataAll.data.length">
				<view class="nostrongtext">共{{dataAll.data.length}}行，{{hejiAll.goods_zl_num}}种，共{{hejiAll.total_goods_price}}元
				</view>
				<view class="nostrongtext">
					<view class="flexleft flex_wrap">
						<view class="smalltext xiaoshou margin_top2">合计：
							<text class="lvse">{{Number(hejiAll.total_goods_price) - Number(dataAll.discount_price) - Number(dataAll.use_yfk_price) + Number(dataAll.yf_price)}}元</text>
						</view>
						<view class="smalltext xiaoshou margin_top2">优惠：
							<text class="lvse">{{dataAll.discount_price || 0}}元</text>
						</view>
						<view class="smalltext xiaoshou margin_top2">运费：
							<text class="lvse">{{dataAll.yf_price || 0}}元</text>
						</view>
						<view class="smalltext xiaoshou margin_top2">使用余额：
							<text class="lvse">{{dataAll.use_yfk_price || 0}}元</text>
						</view>
						<view class="smalltext xiaoshou margin_top2">付款：
							<text class="lvse">{{dataAll.pay_price || 0}}元</text>
						</view>
					</view>
					<view class="smalltext xiaoshou margin_top2">本次未付款：
						<text class="hongse">{{dataAll.order_qk_money}}元</text>
					</view>
				</view>
			</view>
			<view class="mainpadding2">
				<view class="surebtns" @click="submit">提交</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="ffffff dibu flexbetween">
			<view class="shuruk flexbetween">
				<input type="text" class="inputs" placeholder="输入商品首拼/编号" disabled disabled="" @click="tianjia(1)">
				<view class="tianjia" @click="tianjia(2)">添加</view>
			</view>
			<view class="scan2" @click="scanbarCode()"></view>
		</view>
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				selectshow: false,
				fkshow: false,
				jiazaijj:false,
				dataAll: {
					discount_price: "", //优惠金额
					pay_price: "", //付款金额
					warehouse_id: "", //仓库ID
					warehouse_name: "", //仓库名称
					supplier_id: "", //供应商ID
					supplier_name: "", //供应商名称
					use_yfk_price: "", //使用余额
					qk_money: "",
					yfk_money: "",
					order_qk_money: "",
					yf_price: "", //运费
					ps_type: "1", //配送方式
					kjfp_type: "1", //是否开具发票
					notes: "", //备注
					data: [],
				},
				hejiAll: {
					total_price:"",
				},
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				wfxzflag:true,
				clearremove:false,
			}
		},
		onShow() {
			uni.$off("gysSelectFn")
			uni.$on("gysSelectFn", data => {
				this.wfxzflag = false
				this.dataAll.supplier_id = data.id
				this.dataAll.supplier_name = data.name
				this.dataAll.yfk_money = data.yfk_money
				this.dataAll.qk_money = data.qk_money
				return false
			})
			uni.$off("ckSelectFn")
			uni.$on("ckSelectFn", data => {
				this.wfxzflag = false
				this.dataAll.warehouse_id = data.id
				this.dataAll.warehouse_name = data.name
				return false
			})
			if (this.wfxzflag && uni.getStorageSync("caigoudanInfo")) {
				this.dataAll = JSON.parse(uni.getStorageSync("caigoudanInfo"))
				this.init()
			}else{
				this.wfxzflag = true
			}
		},
		watch: {
			dataAll: {
				deep: true,
				handler(newval) {
					if(this.hejiAll){
						let yf_price = this.dataAll.ps_type == 2 ? this.dataAll.yf_price : 0
						this.dataAll.order_qk_money = Number(this.hejiAll.total_goods_price) - Number(this.dataAll.discount_price) +
							Number(yf_price) - Number(this.dataAll.use_yfk_price) - Number(this.dataAll.pay_price)
					}
					if(this.dataAll.data.length==0){
						this.dataAll.discount_price = ""
						this.dataAll.yf_price = ""
						this.dataAll.use_yfk_price = ""
					}
					this.refreshmsg()
				}
			}
		},
		onUnload() {
			if (Number(this.dataAll.order_qk_money) < 0) {
				this.dataAll.use_yfk_price = ""
				this.dataAll.discount_price = ""
			}
			if (Number(this.dataAll.use_yfk_price) > Number(this.dataAll.qk_money)) {
				this.dataAll.use_yfk_price = ""
			}
			if(!this.clearremove){
				this.refreshmsg()
			}
		},
		methods: {
			init() {
				let data = JSON.parse(JSON.stringify(this.dataAll.data))
				data.forEach(item => {
					delete item.goodsinfo
					delete item.goods_sku_name
				})
				let caigoudanInfo = {
					discount_price: this.dataAll.discount_price,
					pay_price: this.dataAll.pay_price,
					warehouse_id: this.dataAll.warehouse_id,
					supplier_id: this.dataAll.supplier_id,
					use_yfk_price: this.dataAll.use_yfk_price,
					yf_price: this.dataAll.yf_price,
					data,
				}
				httpRequest.request('/dhtapi/Procureorder/sure', 'POST', caigoudanInfo, false, false, true).then(res => {
					this.hejiAll = res.data
					if(this.dataAll.yfk_money && this.dataAll.data.length){
						if(this.dataAll.use_yfk_price===""){
							if(Number(this.hejiAll.total_price)>Number(this.dataAll.yfk_money)){
								this.dataAll.use_yfk_price = this.dataAll.yfk_money
							}else{
								this.dataAll.use_yfk_price = this.hejiAll.total_price
							}
						}
					}else{
						this.dataAll.use_yfk_price = ""
					}
					this.dataAll.order_qk_money = Number(this.hejiAll.total_price) - Number(this.dataAll
							.discount_price) - Number(this.dataAll.yf_price) - Number(this.dataAll.use_yfk_price) -
						Number(this.dataAll.pay_price)
					
				}).catch(err => {})
			},
			// 数据刷新
			refreshmsg() {
				let _this = this
				uni.setStorageSync('caigoudanInfo', JSON.stringify(this.dataAll))
			},
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			//跳转添加商品页面
			tianjia(value) {
				if (this.dataAll.supplier_name == "") {
					httpRequest.toast("请选择供应商")
					return false
				}
				if (this.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				let data = {
					type: 1, //采购单
					warehouse_id: this.dataAll.warehouse_id,
					supplier_id: this.dataAll.supplier_id,
					keyword:""
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/tianjspxsdd?getmsg=' + encodeURIComponent(JSON.stringify(
						data))
				})
			},
			scanbarCode() {
				let that = this
				if (that.dataAll.supplier_name == "") {
					httpRequest.toast("请选择供应商")
					return false
				}
				if (that.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						let data = {
							type: 1, //采购单
							warehouse_id: that.dataAll.warehouse_id,
							keyword:res.result
						}
						uni.navigateTo({
							url: '/pages/workbench/xiaoshou/tianjspxsdd?getmsg=' + encodeURIComponent(JSON.stringify(
								data))
						})
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			// 提交单据
			submit() {
				if (this.dataAll.supplier_id == "") {
					httpRequest.toast("请选择供货商")
					return false
				}
				if (this.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				if (!this.dataAll.data.length) {
					httpRequest.toast("请添加商品")
					return false
				}
				if (this.hejiAll) {
					if (this.dataAll.order_qk_money < 0) {
						httpRequest.toast("您的当前单据输入金额已超过总金额，请核查！")
						return false
					}
				}
				if(Number(this.dataAll.use_yfk_price) > Number(this.dataAll.yfk_money)){
					httpRequest.toast("使用余额不能大于当前供应商总余额！")
					return false
				}
				let data = JSON.parse(JSON.stringify(this.dataAll.data))
				data.forEach(item => {
					delete item.goodsinfo
					delete item.goods_sku_name
				})
				let caigoudanInfo = {
					discount_price: this.dataAll.discount_price,
					pay_price: this.dataAll.pay_price,
					warehouse_id: this.dataAll.warehouse_id,
					supplier_id: this.dataAll.supplier_id,
					use_yfk_price: this.dataAll.use_yfk_price,
					yf_price: this.dataAll.yf_price,
					ps_type: this.dataAll.ps_type,
					kjfp_type: this.dataAll.kjfp_type,
					notes:this.dataAll.notes,
					data,
				}
				httpRequest.request('/dhtapi/Procureorder/addProcureOrder', 'POST', caigoudanInfo, false, false, true)
					.then(res => {
						httpRequest.toast(res.msg)
						if (res.code == 1) {
							// uni.setStorageSync('caigoudanInfo', "")
							this.dataAll.data = []
							this.dataAll.pay_price = ""
							this.dataAll.use_yfk_price = ""
							this.dataAll.discount_price = ""
							this.dataAll.notes = ""
							this.dataAll.yf_price = ""
							this.refreshmsg()
							setTimeout(function() {
								uni.navigateBack(1)
							}, 500)
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
			},
			xgdjmx(item,index) {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
				let obj = {
					type:1,
					item,
					index
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/xiugaidjmx?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			dian() {
				this.selectshow = this.selectshow == false ? true : false
			},
			hidefalse() {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
			},
			qingkong() {
				this.selectshow = false
				this.modal.modalShow = true
				this.modal.title = "确认清空单据？"
			},
			modalSure(){
				this.modal.modalShow = false
				if(this.modal.title=="确认清空单据？"){
					this.clearremove = true
					uni.setStorageSync('caigoudanInfo', "")
					httpRequest.toast("清除成功")
					setTimeout(function() {
						uni.navigateBack(1)
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}

	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}

	// /deep/.u-popup__content{
	// 	width: 80%;
	// }
	.zhengds {
		padding: 40rpx;
		max-width: 550rpx;
	}

	.shangpin {
		padding-bottom: 30rpx;
		border-bottom: 1px solid rgba(153, 153, 153, 0.05);
	}

	.btns {
		width: 198rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.btn2 {
		color: #FFFFFF;
		background: #0BBDCB;
		border-radius: 74rpx;
		margin-left: 30rpx;
	}

	.btn1 {
		border: 1rpx solid #0BBDCB;
		color: #0BBDCB;
		background: #FFFFFF;
		border-radius: 74rpx;
	}

	.xiahuaxian {
		text-decoration: underline #333333;
	}

	.quedinng {
		margin-right: 30rpx;
	}

	.shurudh {
		border-radius: 24rpx;
		height: 60rpx;
		font-size: 30rpx;
		width: 460rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: rgba(217, 217, 217, .2);
		text-align: center;
	}

	.topbox {
		border: 2rpx solid rgba(255, 255, 255, .1);
	}

	.dibu {
		width: 100%;
		padding: 30rpx 30rpx;
		position: fixed;
		z-index: 1000;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}

	.tianjia {
		height: 62rpx;
		width: 136rpx;
		background: rgba(11, 189, 203, .1);
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		border-radius: 98px 98px 98px 98px;
	}

	.inputs {
		height: 62rpx;
		width: 70%;
		font-size: 28rpx;
		padding-left: 44rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.shuruk {
		width: 90%;
		background: rgba(217, 217, 217, .2);
		border-radius: 74rpx;
	}

	.shangtext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.lansetextwbk {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.bigtext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.leixingbtn1 {
		margin-right: 20rpx;
	}

	.leixingbtn {
		width: 218rpx;
		height: 52rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx;
	}

	// 定位点点点
	.diandiandian {
		position: relative;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}

	.lansebtn {
		color: #0BBDCB;
		background: rgba(11, 189, 203, .1);
	}

	.allbtn {
		width: 218rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.huisebtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
	}

	.lvse {
		color: #00B855;
	}

	.hongse {
		color: #FF0000;
	}

	.xiaoshou {
		margin-right: 30rpx;
	}
</style>